<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>设备列表</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="{{asset('/layuiadmin/layui/css/layui.css')}}" media="all">
  <link rel="stylesheet" href="{{asset('/layuiadmin/style/admin.css')}}" media="all">
  <style>
    .edit{background-color: #ed9c3a;}
    .shenhe{background-color: #429488;}    
    .see{background-color: #7cb717;} 
    .tongbu{background-color: #4c9ef8;color:#fff;}
    .cur{color:#009688;}
    .userbox,.storebox{height:190px;margin-right:0; overflow-y: auto; z-index: 999; position: absolute; left: 0px; top: 63px; width:298px; background-color:#ffffff; border: 1px solid #ddd;}
    .userbox .list,.storebox .list{height:38px;line-height: 38px;cursor:pointer; padding-left:10px;}
    .userbox .list:hover,.storebox .list:hover{background-color:#eeeeee;}
  </style>
</head>
<body>

  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">

        <div class="layui-fluid">
          <div class="layui-row layui-col-space15">
            <div class="layui-col-md12" style="margin-top:0px">
              <div class="layui-card"> 
                <div class="layui-card-header">设备列表</div>
                  
                <div class="layui-card-body">

                  <div class="layui-btn-container" style="font-size:14px;">
                  <div class="layui-form" lay-filter="component-form-group" style="display: flex;flex-wrap: wrap;">
                    <div class="layui-form-item">                          
                        <div class="layui-input-block" style="margin-left:0">
                            <text class="yname">设备类型</text>
                            <select name="status" id="status" lay-filter="status">
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block" style="margin-left:10px;border-radius:5px">
                            <text class="yname">门店名称</text>
                            <input type="text" style="border-radius:5px"name="schoolname" lay-verify="schoolname" autocomplete="off" placeholder="请输入门店名称或门店ID" class="layui-input inputstore">
                            <div class="storebox" style='display: none'></div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block" style="margin-left:10px;border-radius:5px">
                            <text class="yname">设备号</text>
                            <input type="text" style="border-radius:5px"name="device_no" lay-verify="device_no" autocomplete="off" placeholder="请输入设备号" class="layui-input device_no">
                        </div>
                    </div>
                    <div class="layui-inline" style="display: flex;align-items: center;margin-left: 10px;margin-top: 6px;">
                        <button class="layui-btn layuiadmin-btn-list" lay-submit="" lay-filter="LAY-app-contlist-search" style="border-radius:5px;margin-top:-5px;margin-bottom: 0;height:36px;line-height: 36px;">
                            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                        </button>
                    </div>
                    <button class="layui-btn export" style="border-radius:5px;margin-top:20px;margin-bottom: 4px;height:36px;line-height: 36px;">导出</button>
                  </div>

                  </div>
                  

                  
                  <table class="layui-hide" id="test-table-page" lay-filter="test-table-page"></table>
                  <!-- 判断状态 -->
                  <script type="text/html" id="table-content-list" class="layui-btn-small">
                    <a class="layui-btn layui-btn-normal layui-btn-xs del" lay-event="del">删除</a>
                  </script>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>


  <input type="hidden" class="store_id">
  <input type="hidden" class="device_type">
  <script src="{{asset('/layuiadmin/layui/layui.js')}}"></script> 
  <script src="{{asset('/layuiadmin/jquery.min.js')}}"></script>
<script src="{{asset('/layuiadmin/jquerysession.js')}}"></script>
    <script>
    var token = localStorage.getItem("Usertoken");

    layui.config({
      base: '../../layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index','form','table'], function(){
        var $ = layui.$
            ,admin = layui.admin
            ,form = layui.form
            ,table = layui.table;

       // 未登录,跳转登录页面
        $(document).ready(function(){        
            if(token==null){
                window.location.href="{{url('/user/login')}}"; 
            }
        })
        
        $.ajax({
            url : "{{url('/api/v2/Device/Device/type')}}",
            data : {token:token},
            type : 'get',
            dataType:'json',
            success : function(data) {
                var optionStr = "";
                for(var i=0;i<data.data.length;i++){
                    optionStr += "<option value='" + data.data[i].device_type + "'>"
                    + data.data[i].device_name + "</option>";
                }
                $("#status").html('');
                $("#status").append('<option value="">选择设备类型</option>'+optionStr);
                layui.form.render('select');
            },
            error : function(data) {
                alert('查找板块报错');
            }
        });

        $(".inputstore").bind("input propertychange",function(event){
            var store_name = $(this).val();
            if (store_name.length == 0) {
                $('.storebox').html('');
                $('.storebox').hide();
                $('.store_id').val('')
            } else {
                $.post("{{url('/api/user/store_lists')}}",
                {
                    token:token
                    ,store_name:$(this).val()
                    ,l:100
                },function(res){
                    var html="";
                    if(res.t==0){
                        $('.storebox').html('');
                    }else{
                        for(var i=0;i<res.data.length;i++){
                            html+='<div class="list" data='+res.data[i].store_id+'>'+res.data[i].store_name+'</div>'
                        }
                        $(".storebox").show();
                        $('.storebox').html('');
                        $('.storebox').append(html);
                    }
                },"json");
            }
        });

        $(".storebox").on("click",".list",function(){
            $('.inputstore').val($(this).html());
            $('.store_id').val($(this).attr('data'));
            $('.storebox').hide();
        });
        // 渲染表格
        var tableIns = table.render({
            elem: '#test-table-page'
            ,url: ""
            ,method: 'get'
            ,where:{
              token:token,        
            }
            ,request:{
              pageName: 'page', 
              limitName: 'pagesize'
            }
            ,page: true
            ,cellMinWidth: 150
            ,cols: [[
              {field:'device_no', title: '设备号',}
              ,{field:'store_id', title: '店铺ID'}
               ,{field:'store_name', title: '店铺名称'}
              ,{field:'device_type',  title: '设备类型'}
              ,{field:'device_name', title: '设备类型名称'} 
              ,{field:'merchant_name', title: '绑定收银员'}
              ,{field:'merchant_id', title: '收银员ID'} 
              ,{field:'device_key', title: '设备key'} 
              ,{field:'created_at', title: '绑定时间'}
              ,{width:150,align:'center', fixed: 'right', toolbar: '#table-content-list',title: '操作'}
            ]]
            ,response: {
              statusName: 'status' //数据状态的字段名称，默认：code
              ,statusCode: 1 //成功的状态码，默认：0
              ,msgName: 'message' //状态信息的字段名称，默认：msg
              ,countName: 'total' //数据总数的字段名称，默认：count
              ,dataName: 'list' //数据列表的字段名称，默认：data
            } 
            ,done: function(res, curr, count){
              $('th').css({'font-weight': 'bold', 'font-size': '15','color': 'black','background':'linear-gradient(#f2f2f2,#cfcfcf)'});	//进行表头样式设置
            }

        });



        table.on('tool(test-table-page)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
          var e = obj.data; //获得当前行数据
          var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
          var tr = obj.tr; //获得当前行 tr 的DOM对象
          console.log(e);
          // localStorage.setItem('s_store_id', e.store_id)
          if(layEvent === 'del'){ //审核
            layer.confirm('确定删除此条信息吗?', function(index){
              obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
              layer.close(index);
                
              var pass =$.session.get('pass');
              // 重置cookie有效期
            var time = Date.parse(new Date()) + (5 * 60 * 1000);
            $.session.set('time', time);
            //   console.log(pass)  
              $.ajax({
                url : "{{url('/api/device/del')}}",
                data : {token:token,id:e.id,pass: pass, path: 'api/device/del',},
                type : 'post',
                dataType:"json",
                success : function(data) {
                  console.log(data);
                  if(data.status==1){
                    layer.msg(data.message, {
                      offset: '50px'
                      ,icon: 1
                      ,time: 1000
                    }); 
                  }else{
                    layer.msg(data.message, {
                    offset: '50px'
                    ,icon: 2
                    ,time: 3000
                  });
                  }
                   
                },
                error : function(data) {
                  layer.msg(data.message, {
                    offset: '50px'
                    ,icon: 2
                    ,time: 3000
                  });
                }
            });

            });
          }

        });

       
        // 选择审核状态
        form.on('select(status)', function(data){
          var type = data.value;
          $('.device_type').val(type)
        });

        //监听搜索
        form.on('submit(LAY-app-contlist-search)', function(data){
            //执行重载
            var pageLoading = layer.msg('数据请求中..', {
                icon: 16
                ,shade: 0.3
                ,time: false
            });
            let Values = {
                device_type:$('.device_type').val(),
                store_id:$('.store_id').val(),
                device_no:$('.device_no').val(),
                token:token
            }
            tableIns.reload({
                url: "{{url('/api/v2/Device/Device/listsDevice')}}",
                where: Values,
                page: {
                    curr: 1 //重新从第 1 页开始
                },
                done:function(res, curr, count){
                    layer.close(pageLoading);
                }
            });
        });

        $('.export').click(function(){
            //执行重载
            var exportLoading = layer.msg('数据导出中..', {
                icon: 16
                ,shade: 0.3
                ,time: false
            });
            let Values = {
                device_type:$('.device_type').val(),
                store_id:$('.store_id').val(),
                device_no:$('.device_no').val(),
                token:token
            }
            $.ajax({
                url : "{{url('/api/v2/Device/Device/listsDeviceExport')}}",
                data : Values,
                type : 'post',
                dataType:'json',
                success : function(data) {
                    layer.close(exportLoading);
                    if(data.status == 1){
                        let urls = data.url ? data.url.replace(/http:\/\//i, 'https://'):'';
                        urls && (window.location.href=urls);
                    }
                },
                error : function(data) {
                    layer.close(exportLoading);
                    alert('查找板块报错');
                }
            });
        })

    });

  </script>

</body>
</html>





